<template>
  <div class="chart-size"></div>
</template>

<script>
  import ResizeMixin from './mixins/resize';
  // ------------- axios ---------------
  import {getRecordTreeByDaily, getRecordTreeByMajor} from "../../api/searchr";

  export default {
    mixins: [ResizeMixin],
    data() {
      return {
        isUpdate: false,
        // ------------- 树内数据 --------------------
        completionRemark: null,
        completionTime: "2020-04-12 15:31:39",
        createRemark: "test",
        createTime: "2020-04-12 15:31:39",
        problemList: [],
        recordSn: "",
        recordStatus: 2,
        recordType: 1,
        score: 82.7595685125834,
        triggerType: 1,
        //  ------------- 树型样式 ------------
        fontsize: 25,
        fontsizeSmall: 15
      };
    },
    computed: {
      option: function() {
        return {
          grid: {
            height: "50%",
            top: "center",
            left: 40
          },
          series: [],
        };
      },
    },
    props: {
      info: {
        type: Object,
        default: () => {
          return {
            workType: 1 // 1- 日常巡检 2- 安全评估
            , recordId: 1
          };
        }
      },
      needUpdate: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      info: {
        immediate: true,    // 这句重要
        deep: true, //true 深度监听
        handler(val) {
          switch (val.workType) {
            case 1:
              this.getRecordTreeByDaily(val);
              break;
            case 2:
              this.getRecordTreeByMajor(val);
              break;
            default:
              break;
          }
        }
      },
      isUpdate: function() {
        let option = {
          series: {
            type: "tree",
            expandAndCollapse: false,
            initialTreeDepth: 1,
            data: [{
              left: "5%",
              name: "日常巡检",
              itemStyle: {
                color: "rgba(222, 43, 43, 1)"
              },
              label: {
                fontSize: this.fontsize,
                position: "top",
              },
              children: [
                {
                  name: "记录编号",
                  children: [
                    {
                      name: this.recordSn,
                      label: {
                        fontSize: this.fontsize,
                        position: "top",
                      },
                    },
                  ],
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                },
                {
                  name: "工作类型",
                  children: [
                    {
                      name: this.checkRecordType(this.recordType),
                      label: {
                        fontSize: this.fontsize,
                        position: "top",
                      },
                    },
                  ],
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  }
                },
                {
                  name: "触发时间",
                  children: [
                    {
                      name: this.DateFormat(this.createTime),
                      label: {
                        position: "top",
                        fontSize: this.fontsize
                      },
                    },
                  ],
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                },
                {
                  name: "触发备注",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [
                    {
                      name: this.createRemark,
                      label: {
                        position: "top",
                        fontSize: this.fontsize
                      },
                    },
                  ],
                },
                {
                  name: "巡检日期",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [
                    {
                      name: this.completionTime,
                      label: {
                        position: "top",
                        fontSize: this.fontsize
                      },
                    },
                  ],
                },
                {
                  name: "巡检状态",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [{
                    name: this.recordStatus,
                    label: {
                      position: "top",
                      fontSize: this.fontsize
                    },
                  }]
                },
                {
                  name: "巡检分值",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [{
                    name: this.score,
                    label: {
                      position: "top",
                      fontSize: this.fontsize
                    },
                  }]
                },
                {
                  name: "巡检备注",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [{
                    name: this.completionRemark,
                    label: {
                      position: "top",
                      fontSize: this.fontsize
                    },
                  }]
                },
                {
                  name: "触发类型",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [{
                    name: this.triggerType,
                    label: {
                      position: "top",
                      fontSize: this.fontsize
                    },
                  }]
                },
                {
                  name: "巡检项",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: this.problemList
                },
              ],
            }]
          }
        };
        this.chart.setOption(option);
      },
      /**
       * 来自外部的更新通知
       * */
      needUpdate: function() {
        let option = {
          series: {
            type: "tree",
            expandAndCollapse: false,
            initialTreeDepth: 1,
            data: [{
              left: "5%",
              name: "日常巡检",
              itemStyle: {
                color: "rgba(222, 43, 43, 1)"
              },
              label: {
                fontSize: this.fontsize,
                position: "top",
              },
              children: [
                {
                  name: "记录编号",
                  children: [
                    {
                      name: this.recordSn,
                      label: {
                        fontSize: this.fontsize,
                        position: "top",
                      },
                    },
                  ],
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                },
                {
                  name: "工作类型",
                  children: [
                    {
                      name: this.checkRecordType(this.recordType),
                      label: {
                        fontSize: this.fontsize,
                        position: "top",
                      },
                    },
                  ],
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  }
                },
                {
                  name: "触发时间",
                  children: [
                    {
                      name: this.DateFormat(this.createTime),
                      label: {
                        position: "top",
                        fontSize: this.fontsize
                      },
                    },
                  ],
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                },
                {
                  name: "触发备注",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [
                    {
                      name: this.createRemark,
                      label: {
                        position: "top",
                        fontSize: this.fontsize
                      },
                    },
                  ],
                },
                {
                  name: "巡检日期",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [
                    {
                      name: this.completionTime,
                      label: {
                        position: "top",
                        fontSize: this.fontsize
                      },
                    },
                  ],
                },
                {
                  name: "巡检状态",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [{
                    name: this.recordStatus,
                    label: {
                      position: "top",
                      fontSize: this.fontsize
                    },
                  }]
                },
                {
                  name: "巡检分值",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [{
                    name: this.score,
                    label: {
                      position: "top",
                      fontSize: this.fontsize
                    },
                  }]
                },
                {
                  name: "巡检备注",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [{
                    name: this.completionRemark,
                    label: {
                      position: "top",
                      fontSize: this.fontsize
                    },
                  }]
                },
                {
                  name: "触发类型",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: [{
                    name: this.triggerType,
                    label: {
                      position: "top",
                      fontSize: this.fontsize
                    },
                  }]
                },
                {
                  name: "巡检项",
                  label: {
                    position: "top",
                    fontSize: this.fontsize
                  },
                  children: this.problemList
                },
              ],
            }]
          }
        };
        this.chart.setOption(option);
      }
    },
    methods: {
      /**
       * 绑定点击事件
       * */
      onclickfunc: function() {
        let that = this;
        this.chart.on("click", function(e) {
        });
      },
      //------------------ axios -----------------------
      /**
       * 获取日常巡检溯源
       * */
      getRecordTreeByDaily: function(postData) {
        getRecordTreeByDaily(this.$qs.stringify(postData))
            .then(res => {
              this.makeDailyData(res.data);
            });
      },
      /**
       * 安全评估溯源
       * @param postData
       */
      getRecordTreeByMajor: function(postData) {
        getRecordTreeByMajor(this.$qs.stringify(postData))
            .then(res => {
              this.makeMajorData(res.data);
            });
      },

      //  -------------------- tool --------------------

      /**
       * 处理日常巡检数据
       * */
      makeDailyData: function(datacontent) {
        let recordSn = datacontent.recordSn === null ? "不详" : datacontent.recordSn;
        let completionRemarks = datacontent.completionRemark === null ? "不详" : datacontent.completionRemarks;
        let completionTime = this.DateFormat(datacontent.completionTime);
        let createRemark = datacontent.createRemark === null ? "不详" : datacontent.createRemark;
        let createTime = this.DateFormat(datacontent.createTime);
        let problemList = this.makeDailyProblemList(datacontent.problemList);
        let recordStatus = this.checkRecordStatus(datacontent.recordStatus);
        let score = datacontent.score === null ? "不详" : datacontent.score;
        let triggerType = this.checkTriggerType(datacontent.triggerType);

        let children = [];
        children.push(this.makeDictStr("记录编号：" + recordSn));
        children.push(this.makeDictStr("触发时间：" + createTime));
        children.push(this.makeDictStr("触发类型：" + triggerType));
        children.push(this.makeDictStr("触发备注：" + createRemark));
        children.push(this.makeDictStr("巡检日期：" + completionTime));
        children.push(this.makeDictStr("巡检状态：" + recordStatus));
        children.push(this.makeDictStr("巡检分值：" + score));
        children.push(this.makeDictStr("巡检备注：" + completionRemarks));
        children.push(this.makeDictList("巡检项(" + problemList.length + ")个", problemList));

        /**
         * option
         * */
        let option = {
          series: {
            type: "tree",
            data: [{
              left: "5%",
              name: "日常巡检",
              itemStyle: {
                color: "rgb(222,43,43)"
              },
              label: {
                fontSize: this.fontsize,
                position: "top",
              },
              children: children,
            }]
          }
        };
        this.chart.clear();
        this.chart.setOption(option);
        this.onclickfunc();
      },

      /**
       * 处理安全评估数据
       * */
      makeMajorData: function(datacontent) {
        let recordSn = datacontent.recordSn === null ? "不详" : datacontent.recordSn;
        let createTime = this.DateFormat(datacontent.createTime);
        let triggerType = this.checkTriggerType(datacontent.triggerType);
        let createRemark = datacontent.createRemark === null ? "不详" : datacontent.createRemark;
        let completionTime = this.DateFormat(datacontent.completionTime);
        let recordStatus = this.checkRecordStatus(datacontent.recordStatus);
        let score = datacontent.score;
        let completionRemarks = datacontent.completionRemark === null ? "不详" : datacontent.completionRemark;
        let problemPhotoNumber = datacontent.problemPhotoNumber === null ? 0 : datacontent.problemPhotoNumber;
        let solvePhotoNumber = datacontent.solvePhotoNumber === null ? 0 : datacontent.solvePhotoNumber;
        let problemList = this.makeMajorProblemList(datacontent.problemList);

        let children = [];
        children.push(this.makeDictStr("记录编号：" + recordSn));
        children.push(this.makeDictStr("触发时间：" + createTime));
        children.push(this.makeDictStr("触发类型：" + triggerType));
        children.push(this.makeDictStr("触发备注：" + createRemark));
        children.push(this.makeDictStr("评估日期：" + completionTime));
        children.push(this.makeDictStr("评估状态：" + recordStatus));
        children.push(this.makeDictStr("评估分值：" + score));
        children.push(this.makeDictStr("评估备注：" + completionRemarks));
        children.push(this.makeDictStr("问题图片(" + problemPhotoNumber + ")张"));
        children.push(this.makeDictStr("解决图片(" + solvePhotoNumber + ")张"));
        children.push(this.makeDictList("评估出现的问题(" + problemList.length + ")个", problemList));

        let option = {
          series: {
            type: "tree",
            data: [{
              left: "5%",
              name: "安全评估",
              itemStyle: {
                color: "rgba(222, 43, 43, 1)"
              },
              label: {
                fontSize: this.fontsize,
                position: "top",
              },
              children: children,
            }]
          }
        };
        this.chart.clear();
        this.chart.setOption(option);
      },

      /**
       * 处理日常巡检问题列表
       * */
      makeDailyProblemList: function(val) {
        let ret = [];
        if (val === undefined || val === null) return ret;
        for (let i = 0; i < val.length; i++) {

          let children = [];
          children.push(this.makeDictStr("巡检项：" + val[i].describe));
          children.push(this.makeDictStr("巡检结果：" + val[i].value));
          children.push(this.makeDictStr("巡检进度：" + this.checkStatus(val[i].status)));

          if (val[i].status === 1 || val[i].status === 2) {
            children.push(this.makeDictStr("问题照片存证：（" + val[i].problemPhotoNumber + ")张"));
          }
          if (val[i].status === 3) {
            children.push(this.makeDictStr("问题解决时间：" + this.DateFormat(val[i].solveProblemTime)));
            children.push(this.makeDictStr("解决照片存证：（" + val[i].solvePhotoNumber + ")张"));
          }

          let info = {
            name: val[i].describe,
            label: {
              position: "top",
              fontSize: this.fontsizeSmall
            },
            children: children,
          };
          ret.push(info);
        }
        return ret;
      },

      /**
       * 处理日常巡检问题列表
       * */
      makeMajorProblemList: function(val) {
        let ret = [];
        if (val === undefined || val === null) return ret;
        for (let i = 0; i < val.length; i++) {

          let children = [];
          children.push(this.makeDictStr("问题描述：" + val[i].describe));
          children.push(this.makeDictStr("评估结果：" + val[i].value));
          children.push(this.makeDictStr("问题解决进度：" + this.checkStatus(val[i].status)));

          if (val[i].status === 3) {
            children.push(this.makeDictStr("问题解决时间：" + this.DateFormat(val[i].solveProblemTime)));
          }

          let info = {
            name: val[i].describe,
            label: {
              position: "top",
              fontSize: this.fontsizeSmall
            },
            children: children,
          };
          ret.push(info);
        }
        return ret;
      },

      /**
       * 返回一个字典对象
       * */
      makeDictList: function(name, children) {
        return {
          name: name,
          label: {
            position: "top",
            fontSize: this.fontsizeSmall
          },
          children: children
        };
      },

      /**
       * 返回一个字典对象
       * */
      makeDictStr: function(name) {
        return {
          name: name,
          label: {
            position: "top",
            fontSize: this.fontsizeSmall
          },
          children: []
        };
      },

      // --------------- 格式转换 ----------------

      /**
       * 任务状态
       * */
      checkStatus(status) {
        switch (status) {
          case 0:
            return "无异常";
          case 1:
            return "有异常";
          case 2:
            return "异常解决中";
          case 3:
            return "已解决异常";
          default:
            return "不详";
        }
      },

      /**
       * 日期处理
       * @param time
       * @returns {string}
       * @constructor
       */
      DateFormat: function(time) {
        if (time === null) {
          return "不详";
        }
        if (time === undefined) {
          return "不详";
        }
        const dt = new Date(time);
        const y = dt.getFullYear();
        const m = (dt.getMonth() + 1 + '').padStart(2, '0');
        const d = (dt.getDate() + '').padStart(2, '0');

        const hh = (dt.getHours() + '').padStart(2, '0');
        const mm = (dt.getMinutes() + '').padStart(2, '0');
        const ss = (dt.getSeconds() + '').padStart(2, '0');
        return `${y}年${m}月${d}日`;
      }
      ,
      /**
       * 转化记录状态
       * */
      checkRecordStatus: function(e) {
        let ret = "不详";
        switch (e) {
          case 1:
            ret = "待执行";
            break;
          case 2:
            ret = "有问题";
            break;
          case 3:
            ret = "已完成";
            break;
          default:
            break;
        }
        return ret;
      }
      ,
      /**
       * 记录类型转化
       * @param e
       * @returns {string}
       */
      checkRecordType: function(e) {
        let ret = "不详";
        switch (e) {
          case 1:
            ret = "日常巡检";
            break;
          case 2:
            ret = "安全评估";
            break;
          case 3:
            ret = "专业维护";
            break;
          default:
            break;
        }
        return ret;
      }
      ,
      /**
       * 触发类型转化
       * @param e
       * @returns {string}
       */
      checkTriggerType: function(e) {
        let ret = "不详";
        switch (e) {
          case 1:
            ret = "无触发";
            break;
          case 2:
            ret = "手动触发";
            break;
          case 3:
            ret = "定时触发";
            break;
          case 4:
            ret = "地震触发";
            break;
          case 5:
            ret = "风压触发";
            break;
          default:
            break;
        }
        return ret;
      }
    }
  }
  ;
</script>


<style scoped>
.chart-size {
  height: 100%;
  width: 100%;
}
</style>